<template>
  <div class="error-500">
    <img :src="img" alt="500" />
    <div>
      <p class="text-5xl primary">{{ maxTime }}秒后将返回首页</p>
      <el-button type="text" @click="goHome" size="large" >快速返回首页</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Error500',
  data() {
    return {
      maxTime: 5,
      timer: null,
      img: require('@/assets/imgs/common/500.svg')
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.maxTime--;

      if (this.maxTime <= 0) {
        this.goHome();
        clearInterval(this.timer);
      }
    }, 1000);
  },
  beforeDestroy() {
    this.timer = null;
  },
  methods: {
    goHome() {
      this.$router.push({
        path: '/home'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.error-500 {
  display: flex;
  justify-content: center;
  position: relative;
  img {
    flex: none;
  }
  > div{
    position: absolute;
    bottom: 40%;
    right: 20%;
  }
}
</style>
